import type { VideoGenerateRequest } from '../../types/video';

interface ScriptTabProps {
  formData: VideoGenerateRequest;
  onChange: (data: Partial<VideoGenerateRequest>) => void;
}

export default function ScriptTab({ formData, onChange }: ScriptTabProps) {
  return (
    <div className="space-y-6">
      <div>
        <label className="block text-sm font-semibold text-gray-800 mb-2">
          <span className="text-red-500">*</span> 视频标题
        </label>
        <input
          type="text"
          value={formData.title}
          onChange={e => onChange({ title: e.target.value })}
          placeholder="请输入视频标题（必填）"
          className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder-gray-500 ${
            !formData.title?.trim() ? 'border-red-300' : ''
          }`}
        />
        {!formData.title?.trim() && <p className="mt-1 text-sm text-red-600">请输入视频标题</p>}
      </div>

      <div>
        <label className="block text-sm font-semibold text-gray-800 mb-2">
          <span className="text-red-500">*</span> 视频脚本
        </label>
        <textarea
          value={formData.script}
          onChange={e => onChange({ script: e.target.value })}
          placeholder="请输入视频脚本内容（必填）..."
          rows={10}
          className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-900 placeholder-gray-500 ${
            !formData.script.trim() ? 'border-red-300' : ''
          }`}
        />
        <p className="mt-2 text-sm text-gray-700">
          字符数：{formData.script.length} / 1500 (最大限制)
        </p>
        {formData.script.length > 1500 && (
          <p className="mt-1 text-sm text-red-600">脚本长度超过限制，请缩减内容</p>
        )}
        {!formData.script.trim() && <p className="mt-1 text-sm text-red-600">请输入视频脚本内容</p>}
      </div>
    </div>
  );
}
